<template>
  <div class="dashboard-container scrollbar-no-width">
    <el-row :gutter="16">
      <el-col v-for="(item,index) in panelList" :key="item.title" :md="6" :xs="12" class="row-container">
        <card :subtitle="item.title" :class="{ 'main-color': index == 0 }">
          <div class="dashboard-item">
            <div class="dashboard-item-top"><span style="font-size: 32.4px;">{{ item.number }}</span></div>
            <div class="dashboard-item-left">
              <span>
                <svg-icon :icon-class="item.icon" />
              </span>
            </div>
          </div>
          <template #bottom>
            <div class="dashboard-item-block"> 自从上周以来
              <trend
                class="dashboard-item-trend"
                :type="item.upOrDown>=0 ? 'up' : 'down'"
                :is-reverse-color="index === 0"
                :describe="item.upOrDown+'%'"
              />
            </div>
            <i class="el-icon-arrow-right" />
          </template>
        </card>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :md="18" :xs="24" class="row-container">
        <card title="统计数据" describe="(万元)" height="415px" @loaded="onTjsjCardLoaded">
          <template #option>
            <el-date-picker
              v-model="yearAndMonths"
              class="card-option-item"
              type="daterange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期" />

          </template>
          <div id="tjsjEchart" ref="tjsjEchart" class="echart-container" />
        </card>
      </el-col>
      <el-col :md="6" :xs="24" class="row-container">
        <card title="销售渠道" describe="2024年7月" height="415px" @loaded="onXsqdCardLoaded">
          <div id="xstdEchart" ref="xstdEchart" class="echart-container" />
        </card>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :md="12" :xs="24" class="row-container">
        <card title="销售订单排名" height="415px">
          <template #option>
            <el-button-group>
              <el-button type="primary">本周</el-button>
              <el-button plain>近三个月</el-button>
            </el-button-group>
          </template>
          <el-table :data="saleTendList" style="width: 100%">
            <el-table-column align="center" prop="id" label="#" width="60">
              <template slot-scope="scope">{{ scope.$index+1 }}</template>
            </el-table-column>
            <el-table-column prop="productName" label="客户名称" min-width="180" />

            <el-table-column align="center" prop="id" label="较上周" width="90">
              <template slot-scope="scope">
                <trend
                  :type="scope.row.growUp>=0 ? 'up' : 'down'"
                  :describe="scope.row.growUp+'%'"
                />
              </template>
            </el-table-column>
            <el-table-column prop="count" label="订单量" width="100" align="center" />
            <el-table-column prop="date" label="合同签订日期" width="110" align="center" />
            <el-table-column label="操作" align="center" fixed="right" width="90">
              <template slot-scope="scope">
                <button-option type="text" skin="primary" title="操作">操作{{ scope.row.id }}</button-option>
              </template>
            </el-table-column>
          </el-table>
        </card>
      </el-col>
      <el-col :md="12" :xs="24" class="row-container">
        <card title="采购订单排名" height="415px">
          <template #option>
            <el-button-group>
              <el-button type="primary">本周</el-button>
              <el-button plain>近三个月</el-button>
            </el-button-group>
          </template>
          <el-table :data="saleTendList" style="width: 100%">
            <el-table-column align="center" prop="id" label="#" width="60">
              <template slot-scope="scope">{{ scope.$index+1 }}</template>
            </el-table-column>
            <el-table-column prop="productName" label="客户名称" min-width="180" />

            <el-table-column align="center" prop="id" label="较上周" width="90">
              <template slot-scope="scope">
                <trend
                  :type="scope.row.growUp>=0 ? 'up' : 'down'"
                  :describe="scope.row.growUp+'%'"
                />
              </template>
            </el-table-column>
            <el-table-column prop="count" label="订单量" width="100" align="center" />
            <el-table-column prop="date" label="合同签订日期" width="110" align="center" />
            <el-table-column label="操作" align="center" fixed="right" width="90">
              <template slot-scope="scope">
                <button-option type="text" skin="primary" title="操作">操作{{ scope.row.id }}</button-option>
              </template>
            </el-table-column>
          </el-table>
        </card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :md="18" :xs="24" class="row-container">
        <card title="出入库概览" describe="(件)" height="415px" :style="{'border-right': '0','border-radis':'4px 0 0 4px' }" @loaded="onCrkglCardLoaded">
          <template #option>
            <el-date-picker
              v-model="yearAndMonths"
              class="card-option-item"
              type="daterange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期" />
          </template>
          <div id="crkglEchart" ref="crkglEchart" class="echart-container" />
        </card>
      </el-col>
      <el-col :md="6" :xs="24" class="row-container">
        <card height="415px" :style="{'border-left': '0','border-radis':'0 4px 4px 0','box-shadow': 'none' }">
          <template #option>
            <el-button type="primary">导出数据</el-button>
          </template>
          <el-row>
            <el-col :md="24" :xs="12">
              <card describe="本月出库总计（件）" :style="{'border': '0','border-radis':'0','box-shadow': 'none' }">
                <div class="dashboard-item">
                  <div class="dashboard-item-top"><span style="font-size: 32.4px;">1726</span></div>
                </div>
                <template #bottom>
                  <div class="dashboard-item-block"> 自从上周以来
                    <trend
                      class="dashboard-item-trend"
                      type="down"
                      describe="-20.3%"
                    />
                  </div>
                </template>
              </card>
            </el-col>
            <el-col :md="24" :xs="12">
              <card describe="本月入库总计（件）" :style="{'border': '0','border-radis':'0','box-shadow': 'none' }">
                <div class="dashboard-item">
                  <div class="dashboard-item-top"><span style="font-size: 32.4px;">226</span></div>
                </div>
                <template #bottom>
                  <div class="dashboard-item-block"> 自从上周以来
                    <trend
                      class="dashboard-item-trend"
                      type="up"
                      describe="20.3%"
                    />
                  </div>
                </template>
              </card>
            </el-col>
          </el-row>
        </card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { loadTjsjEchart, loadXsqdEchart, loadCrkglEchart } from './chart'
export default {
  name: 'Dashboard',
  components: { },
  data() {
    return {
      yearAndMonths: [],
      yearAndMonth: null,
      panelList: [{
        title: '总收入',
        number: '¥ 28,425.00',
        upOrDown: 20.5,
        icon: 'iconKey'
      },
      {
        title: '总退款',
        number: '¥ 768.00',
        upOrDown: 20.5,
        icon: 'iconKey'
      },
      {
        title: '活跃用户（个）',
        number: '1126',
        upOrDown: -20.5,
        icon: 'login_username'
      },
      {
        title: '订单（个）',
        number: 527,
        upOrDown: 20.5,
        icon: 'iconClock'
      }],
      saleTendList: [
        {
          growUp: 1,
          productName: '国家电网有限公司',
          count: 7059,
          date: '2021-09-01'
        },
        {
          growUp: -1,
          productName: '深圳燃气集团股份有限公司',
          count: 6437,
          date: '2021-09-01'
        },
        {
          growUp: 4,
          productName: '国家烟草专卖局',
          count: 4221,
          date: '2021-09-01'
        },
        {
          growUp: 3,
          productName: '中国电信集团有限公司',
          count: 3317,
          date: '2021-09-01'
        },
        {
          growUp: -3,
          productName: '中国移动通信集团有限公司',
          count: 3015,
          date: '2021-09-01'
        },
        {
          growUp: -3,
          productName: '新余市办公用户采购项目',
          count: 2015,
          date: '2021-09-12'
        }]
    }
  },
  computed: {
  },
  watch: {
    'sideBox.payShow': function(val) {
      if (val === false) {
        this.$refs.pay.clearInterval()
      }
    }
  },
  mounted() {
  },
  destroyed() {

  },
  created() {
  },
  methods: {
    onTjsjCardLoaded() {
      this.initTjsjEchart()
    },
    onXsqdCardLoaded() {
      this.initXsqdEchart()
    },
    onCrkglCardLoaded() {
      this.initCrkglEchart()
    },
    initTjsjEchart() {
      var datas = [
        { time: '00:00', today: 1200, yesterday: 1200 },
        { time: '02:00', today: 1400, yesterday: 1400 },
        { time: '04:00', today: 1008, yesterday: 808 },
        { time: '06:00', today: 1411, yesterday: 811 },
        { time: '08:00', today: 1026, yesterday: 626 },
        { time: '10:00', today: 1288, yesterday: 488 },
        { time: '12:00', today: 1300, yesterday: 1600 },
        { time: '14:00', today: 800, yesterday: 1100 },
        { time: '16:00', today: 1100, yesterday: 500 },
        { time: '18:00', today: 1000, yesterday: 300 },
        { time: '20:00', today: 1118, yesterday: 1998 },
        { time: '22:00', today: 1322, yesterday: 822 }
      ]
      loadTjsjEchart(datas, (arg1, arg2) => {
        this.$modal.msgSuccess('单击了' + arg1)
      })
    },
    initXsqdEchart() {
      var datas = {
        value1: 1200,
        value2: 890
      }
      loadXsqdEchart(datas, (arg1, arg2) => {
        this.$modal.msgSuccess('单击了' + arg1)
      })
    },
    initCrkglEchart() {
      var datas = [
        { time: '00:00', today: 1200, yesterday: 1200 },
        { time: '02:00', today: 1400, yesterday: 1400 },
        { time: '04:00', today: 1008, yesterday: 808 },
        { time: '06:00', today: 1411, yesterday: 811 },
        { time: '08:00', today: 1026, yesterday: 626 },
        { time: '10:00', today: 1288, yesterday: 488 },
        { time: '12:00', today: 1300, yesterday: 1600 },
        { time: '14:00', today: 800, yesterday: 1100 },
        { time: '16:00', today: 1100, yesterday: 500 },
        { time: '18:00', today: 1000, yesterday: 300 },
        { time: '20:00', today: 1118, yesterday: 1998 },
        { time: '22:00', today: 1322, yesterday: 822 }
      ]
      loadCrkglEchart(datas, (arg1, arg2) => {
        this.$modal.msgSuccess('单击了' + arg1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-container{
    margin-top: -10px;
  }
</style>
